<template>
  <div id="theaterDetailPage">
    <el-card>
      <el-row class="grid-demo" style="margin-bottom: 16px">
        <el-col :span="8">
          <el-image :size="100" :src="data.theaterIcon" />
        </el-col>
        <el-col :span="16" class="content-wrapper">
          <h2>影院名称：{{ data.theaterName }}</h2>
          <p>影院地址：{{ data.theaterAddress }}</p>
          <p>影院电话：1234567</p>
        </el-col>
      </el-row>
    </el-card>
    <div style="margin-top: 20px; margin-bottom: 20px">
      <el-row style="max-width: 600px; max-height: 50px">
        <el-col
          :span="4"
          style="
            max-width: 600px;
            max-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          电影名称：
        </el-col>
        <el-col :span="20">
          <el-space wrap>
            <div
              wrap
              v-for="item in movieDateList"
              :key="item.id"
              @click="selectMovie(item.id as number)"
              :class="{
                selected: item.id === isSelect,
                'background-color': item.id === isSelect,
              }"
              style="margin-bottom: 10px"
            >
              {{ item.movieName }}
            </div>
          </el-space>
        </el-col>
      </el-row>
    </div>

    <el-table :data="movieShowDateList" style="width: 100%">
      <el-table-column prop="showTime" label="上映时间" width="180">
        <template #default="scope">
          {{ dayjs(scope.row.showTime).format("YYYY-MM-DD HH:mm") }}
        </template>
      </el-table-column>
      <el-table-column prop="languageType" label="语言版本" width="180">
        <template #default="scope">
          {{ LANGUAGE_TYPE_MAP[scope.row.languageType] }}
        </template>
      </el-table-column>
      <el-table-column prop="hallType" label="影厅类型" width="180">
        <template #default="scope">
          {{ HALL_TYPE_MAP[scope.row.hallType] }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="最低价格" width="180" />
      <el-table-column label="Operations" width="180">
        <template #default="scope">
          <el-button type="primary" @click="handleClick(scope.row.id)"
            >购买
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  reactive,
  ref,
  watchEffect,
  withDefaults,
} from "vue";

import API from "@/api";
import { listMovieVoByPageUsingPost } from "@/api/movieController";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { getTheaterVoByIdUsingGet } from "@/api/theaterController";
import { isTSMappedType } from "@babel/types";
import { listMovieShowVoByPageUsingPost } from "@/api/movieShowController";
import { useRouter } from "vue-router";
import {
  HALL_TYPE_MAP,
  LANGUAGE_TYPE_MAP,
  MOVIE_TYPE_MAP,
} from "@/constant/movie";

interface Props {
  movieId: number;
  theaterId: number;
}

const props = withDefaults(defineProps<Props>(), {
  theaterId: () => {
    return 0;
  },
  movieId: () => {
    return 0;
  },
});

const data = ref<API.TheaterVO>({});
const isSelect = ref<number>(props.movieId);

const isSelectMovie = ref<API.MovieVO>({});
/**
 * 加载数据
 */
const loadData = async () => {
  if (!props) {
    return;
  }
  const res = await getTheaterVoByIdUsingGet({
    id: props.theaterId as any,
  });
  if (res.data.code === 0) {
    data.value = res.data.data as any;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

const movieDateList = ref<API.MovieVO[]>([]);
const selectMovie = (id: number) => {
  console.log(id);
  isSelect.value = id;
};
const movieShowDateList = ref<API.MovieShowVO[]>([]);

/**
 * 加载电影数据
 */
const loadMovieData = async () => {
  const res = await listMovieVoByPageUsingPost({});
  if (res.data.code === 0) {
    movieDateList.value = res.data.data?.records || [];
    isSelectMovie.value = movieDateList.value[0] || {};
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

const loadMovieShowData = async () => {
  const res = await listMovieShowVoByPageUsingPost({
    theaterId: props.theaterId as any,
    movieId: isSelect.value || (props.movieId as any),
  });
  if (res.data.code === 0) {
    movieShowDateList.value = res.data.data?.records || [];
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

watchEffect(() => {
  loadData();
  loadMovieData();
  loadMovieShowData();
});
const router = useRouter();
const handleClick = (id: number) => {
  router.push(`/movie_order/${id}`);
};
</script>

<style scoped>
#theaterDetailPage {
  .el-carousel__item h3 {
    margin: 0;
    color: #475669;
    line-height: 200px;
    text-align: center;
    opacity: 0.75;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .selected {
    border: 2px solid red;
  }

  .background-color {
    background-color: red; /* 点击时改变背景颜色 */
  }
}

#theaterDetailPage .content-wrapper > p {
  margin-bottom: 24px;
}
</style>

<!--<el-tag
          v-for="item in movieDateList"
          :key="item.id"
          type="info"
          :aria-selected="item.id === isSelect"
          @click="selectMovie(item.id)"
        >
          {{ item.movieName }}
        </el-tag>-->
